<template>
  <div class="search">
    <div>
      <span>手机号码：</span>
      <el-input
        v-model="searchValue.phone"
        placeholder="请输入手机号码"
      />
    </div>
    <div>
      <span>号码MD5：</span>
      <el-input
        v-model="searchValue.md5"
        placeholder="请输入手机号码MD5"
      />
    </div>
    <div>
      <span>短信类型：</span>
      <el-select
        v-model="searchValue.type"
        class="m-2"
        placeholder="请选择短信类型"
      >
        <el-option
          v-for="item in messageType"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <el-select
        v-model="searchValue.tempalteId"
        style="margin-left: 10px;"
        placeholder="请选择短信模板"
      >
        <el-option
          v-for="item in messageTemplate"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </div>
    <div>
      <span>导入类型：</span>
      <el-select
        v-model="searchValue.importType"
        class="m-2"
        placeholder="请选择导入类型"
      >
        <el-option
          v-for="item in importType"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </div>
    <div>
      <span>发送类型：</span>
      <el-select
        v-model="searchValue.sendType"
        class="m-2"
        placeholder="请选择"
      >
        <el-option
          v-for="item in sendType"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </div>
    <div>
      <span>外呼任务：</span>
      <el-select
        v-model="searchValue.mession"
        class="m-2"
        placeholder="请选择外呼任务"
      >
        <el-option
          v-for="item in outboundType"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </div>
    <div>
      <span>添加日期：</span>
      <el-date-picker
        v-model="searchValue.dateData"
        type="daterange"
        range-separator="-"
        unlink-panels
        format="YYYY/MM/DD"
        value-format="YYYY-MM-DD HH:mm:ss"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      />
    </div>
    <div>
      <span>提交时间：</span>
      <el-date-picker
        v-model="searchValue.submitTimeDate"
        type="daterange"
        range-separator="-"
        unlink-panels
        format="YYYY/MM/DD"
        value-format="YYYY-MM-DD HH:mm:ss"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      />
    </div>
    <div>
      <span>发送时间：</span>
      <el-date-picker
        v-model="searchValue.sendTimeDate"
        range-separator="-"
        unlink-panels
        format="YYYY/MM/DD"
        value-format="YYYY-MM-DD HH:mm:ss"
        type="daterange"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      />
    </div>
    <el-button type="primary" :icon="Search" @click="handleSearch" style="margin-left: 30px;">
      Search
    </el-button>
  </div>
  <div class="table">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="编号" width="180" />
      <el-table-column prop="phone" label="手机号码" width="180" />
      <el-table-column prop="templateName" label="短信模板" />
      <el-table-column prop="typeName" label="类型" width="180" />
      <el-table-column prop="sendTypeName" label="发送类型" />
      <el-table-column prop="mession" label="外呼任务" />
      <el-table-column prop="note" label="备注" />
      <el-table-column prop="count" label="短信条数" />
      <el-table-column prop="status" label="状态" />
      <el-table-column prop="createTime" label="添加时间" width="200px"/>
      <el-table-column prop="sendTime" label="预定发送时间" width="200px"/>
    </el-table>
    <el-pagination
      layout="sizes, prev, pager, next"
      v-model:page-size="pageSize"
      v-model:current-page="pageNum"
      :page-sizes="[100, 200, 300, 400]"
      v-model:total="total"
      style="justify-content: flex-end;"
    ></el-pagination>
  </div>
</template>

<script setup>
import { reactive, ref,onMounted} from 'vue';
import { Search } from '@element-plus/icons-vue';
import {recordData} from '@/api/record'
import {messageTypeList} from '@/api/messageType'
import {messageTemplateList} from '@/api/messageTemplate'
import {importTypeList} from '@/api/importType'
import {sendTypeList} from '@/api/sendType'

const searchValue = reactive({
  phone: '',
  md5: '',
  type: '',
  tempalteId: '',
  importType: '',
  sendType: '',
  mession: '',
  dateData: '',
  submitTimeDate:'',
  sendTimeDate:''
});
const messageType = reactive([]);
const importType = reactive([
  {
    id: 0,
    name: '所有'
  },
]);
const sendType = reactive([
  
]);
const outboundType = [
  {
    name: '所有',
    id: 0,
  },
];
const messageTemplate = reactive([]);
const tableData = reactive([
  
]);
const pageSize = ref(100);
const total = ref();
const pageNum=ref(1)
function handleSearch() {
  let data={
    pageNum:pageNum.value,
    pageSize:pageSize.value,
    status:"3",
    startCreateTime:searchValue.dateData!=null?searchValue.dateData[0]:'',
    endCreateTime:searchValue.dateData!=null?searchValue.dateData[1]:'',
    startSubmitTime:searchValue.submitTimeDate!=null?searchValue.submitTimeDate[0]:'',
    endSubmitTime:searchValue.submitTimeDate!=null?searchValue.submitTimeDate[1]:'',
    startSendTime:searchValue.sendTimeDate!=null?searchValue.sendTimeDate[0]:'',
    endSendTime:searchValue.sendTimeDate!=null?searchValue.sendTimeDate[1]:'',
    ...searchValue
  };
  // console.log(data)
  recordData(data).then(res=>{
    if(res.code==="200"){
      total.value=res.data.total;
      tableData.length=0
      tableData.push(...res.data.records)
    }
  })
}

function initData(){
  let data={
    pageNum:pageNum.value,
    pageSize:pageSize.value,
    status:"3"
  };
  recordData(data).then(res=>{
    if(res.code==="200"){
      total.value=res.data.total;
      tableData.length=0
      tableData.push(...res.data.records)
    }
  })
}
function initMessageTypeData(){
  messageTypeList().then(res=>{
    if(res.code==="200"){
      messageType.length=0;
      messageType.push(...res.data)
    
    }
  })
}

function initMessageTemplateData(){
  messageTemplateList().then(res=>{
    if(res.code==="200"){
      messageTemplate.length=0;
      messageTemplate.push(...res.data)
      
    }
  })
}

function initImportTypeData(){
  importTypeList().then(res=>{
    if(res.code==="200"){
      importType.push(...res.data)
      console.log(importType)
    }
  })
}

function initSendTypeData(){
  sendTypeList().then(res=>{
    if(res.code==="200"){
      sendType.length=0;
      sendType.push(...res.data)
    }
  })
}

initData();
initMessageTypeData();
initMessageTemplateData();
initImportTypeData();
initSendTypeData();
onMounted(() => {});
</script>

<style lang="scss" scoped>
.search {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 5px;
  padding-top: 25px;
  padding-bottom: 30px;
  background-color: white;
  & > div {
    display: flex;
    align-items: center;
    margin-left: 35px;
    margin-bottom: 15px;
    & > span {
      white-space: nowrap;
    }
  }
}
.table {
  margin-top: 10px;
}
</style>
